{% extends "venclave/base.html" %}

{% load venclave_tags %}
{% load bundler_tags %}

{% block styles %}
  {{ block.super }}
  {% css "venclave-styles" "jquery-ui-1.7.1.custom.css" %}
  {% css "venclave-styles" "browse.css" %}
  {% css "venclave-styles" "exhibit.css" %}
{% endblock %}

{% block scripts %}
  {{ block.super }}
  {% javascript "venclave-scripts" "jquery.json-1.3.min.js" %}
  {% javascript "venclave-scripts" "jquery-ui-1.7.1.custom.min.js" %}
  {% javascript "venclave-scripts" "filter.js" %}
  {% javascript "venclave-scripts" "video-list.js" %}

  <link href="/video/exhibit/content/" type="application/json"
    rel="exhibit/data" charset="UTF-8" />
  {% comment %}
  TODO(rnk): We should really use the URL:
  http://static.simile.mit.edu/exhibit/api-2.2.0/exhibit-api.js
  This URL serves up the Javascript with correct mimetypes and caching headers,
  but it creates problems with the slider histograms for year, rating, etc,
  which we have to debug first.
  {% endcomment %}
  {% with "http://simile-widgets.googlecode.com/svn/exhibit/trunk/src/webapp/api/exhibit-api.js" as exhibit_url %}
    {# Adding ?bundle=(true|false) enables or disables exhibit's bundling. #}
    <script src="{{ exhibit_url }}?bundle={% if settings.USE_BUNDLES %}true{% else %}false{% endif %}"
      type="text/javascript"></script>
  {% endwith %}

  <script src="/video/scripts/andListfacet.js" type="text/javascript"></script>

{% comment %}
  <link href="/video/scripts/movies.js" type="application/json" rel="exhibit/data" charset="UTF-8" />
{% endcomment %}

{% endblock scripts %}

{% block content %}

<table class="content">
  <tr>
    <td class="facets">
      <div ex:role="facet"
           ex:facetClass="TextSearch"
           ex:expressions=".Title, .IMDbAKA"
           ex:facetLabel="Search by Title"></div><br>

      <div ex:role="facet"
           ex:facetClass="TextSearch"
           ex:expressions=".IMDbActors, .IMDbDirectors"
           ex:facetLabel="Search by Cast and Crew"></div><br>

      <div ex:role="facet"
           ex:facetClass="TextSearch"
           ex:expressions=".IMDbPlotOutline"
           ex:facetLabel="Search in Plot"></div><br>

      <div ex:role="facet"
           ex:showMissing="false"
           ex:facetLabel="Choose Content Types"
           ex:expression=".type"
           ex:scroll="false"
           ex:sortMode="count"
           ex:sortDirection="forward"></div><br>

      <div ex:role="facet"
           ex:showMissing="false"
           ex:facetLabel="Choose Genres"
           ex:combineMode="and"
           ex:expression=".IMDbGenres"
           ex:height="200px"
           ex:sortMode="count"
           ex:sortDirection="forward"></div><br>

      <div ex:role="facet"
           ex:facetClass="Slider"
           ex:expression=".Year"
           ex:facetLabel="Release Year"
           ex:horizontal="true"
           ex:precision="1"
           ex:histogram="true"
           ex:width="200px"></div><br/>

      <div ex:role="facet"
           ex:facetClass="Slider"
           ex:expression=".IMDbRating"
           ex:facetLabel="IMDb User Rating"
           ex:horizontal="true"
           ex:precision=".1"
           ex:histogram="true"
           ex:width="200px"></div><br>

      <div ex:role="facet"
           ex:facetClass="Slider"
           ex:expression=".RTRating"
           ex:facetLabel="RottenTomatoes Rating"
           ex:horizontal="true"
           ex:precision="1"
           ex:histogram="true"
           ex:width="200px"></div>
      <br>

      <div ex:role="facet"
           ex:facetClass="Slider"
           ex:expression=".MCRating"
           ex:facetLabel="Metacritic Rating"
           ex:horizontal="true"
           ex:precision="1"
           ex:histogram="true"
           ex:width="200px"></div>
      <br>

      <div ex:role="facet"
           ex:showMissing="false"
           ex:facetLabel="Actors"
           ex:combineMode="and"
           ex:expression=".IMDbActors"
           ex:height="200px"
           ex:sortMode="count"
           ex:sortDirection="forward"></div><br>

      <div ex:role="facet"
           ex:showMissing="false"
           ex:facetLabel="Directors"
           ex:combineMode="and"
           ex:expression=".IMDbDirectors"
           ex:height="200px"
           ex:sortMode="count"
           ex:sortDirection="forward"></div><br>


      <div ex:role="facet"
           ex:showMissing="false"
           ex:facetLabel="Missing Data"
           ex:combineMode="and"
           ex:expression=".Missing"
           ex:height="200px"
           ex:sortMode="count"
           ex:sortDirection="forward"></div><br>

    </td>
    <td class="results">
      <div ex:role="exhibit-collection" ex:itemTypes="Movie,TV Show"></div>

      <div ex:role="view"
           ex:orders=".DateAdded"
           ex:directions="descending"
           ex:possibleOrders=".Title,.Year,.DL,.IMDbRating,.RTRating,.MCRating,.IMDbRuntime,.DateAdded,.IMDbReleaseDate,.Random,.RTBoxOffice"
           ex:possibleDirections="ascending,ascending,descending,descending,descending,descending,descending,descending,descending,ascending,descending"
           ex:grouped="false"
           ex:paginate="true"
           ex:itemTypes="Movie"
           >
        <!-- ex:showAll="true">-->

        <div class="season" ex:role="lens" style="display: none;" ex:itemTypes="Season">
          <a ex:href-content=".href"><span ex:content=".Label"></span></a>
        </div>

        <table class="content-item" ex:role="lens" style="display: none;" ex:itemTypes="TV Show">
          <tr>
            <td class="poster" rowspan="3">
              <a ex:href-subcontent="../TV/{{".label"|ex_braces}}/">
                <img ex:if-exists=".ThumbURL" ex:src-content=".ThumbURL"
                  width="{{settings.IMDB_THUMBNAIL_WIDTH}}"></a>
            </td>
            <td class="content-name">
              <a ex:href-subcontent="../TV/{{".label"|ex_braces}}/">
                <img src="/video/images/tv_icon.png"/>
                <span class="content-title" ex:content=".Title"></span>
              </a>
            </td>
          </tr>
          <tr>
            <td>
              <ul class="scores">
                <li class="imdb" ex:if-exists=".IMDbURL">
                  <a ex:href-content=".IMDbURL" target="_blank">
                    <img src="/video/images/exhibit/imdb.jpg" height="14">
                    <span class="imdbrating" ex:content=".IMDbRating"></span>
                  </a>
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td class="data">
              <table>
                <tr>
                  <td class="imdbdata">
                    <span ex:if-exists=".IMDbGenres" class="genres">
                      <b>Genres:</b> <span ex:content=".IMDbGenres"></span>
                    </span><br ex:if-exists=".IMDbGenres"/>

                    <span ex:if-exists=".Seasons" class="seasons">
                      <b>Seasons:</b> <span ex:content=".Seasons.link"></span>
                    </span><br ex:if-exists=".Seasons"/>

                    <span ex:if-exists=".IMDbRuntime" class="runtime">
                      <b>Runtime:</b> <span ex:content=".IMDbRuntime"></span> min
                    </span><br ex:if-exists=".IMDbRuntime"/>

                    <span ex:if-exists=".IMDbDirectors" class="directors">
                      <b>Directed by:</b> <span ex:content=".IMDbDirectors"></span>
                    </span><br ex:if-exists=".IMDbDirectors"/>

                    <span ex:if-exists=".IMDbActors" class="actors">
                      <b>Starring:</b> <span ex:content=".IMDbActors"></span>
                    </span><br ex:if-exists=".IMDbActors"/>

                    <span ex:if-exists=".IMDbPlotOutline" class="outline">
                      <b>Plot:</b> <span ex:content=".IMDbPlotOutline"></span>
                    </span><br ex:if-exists=".IMDbPlotOutline"/>

                    <span ex:if-exists=".IMDbReleaseDate" class="releasedate">
                      <b>Release Date:</b> <span ex:content=".IMDbReleaseDate" ex:formats="date { template: 'd MMMM yyyy'}"></span>
                    </span>
                  </td>
                  <td class="rtdata">
                    <span ex:if-exists=".RTDirectors" class="directors">
                      <b>Directed by<b> <span ex:content=".RTDirectors"></span>
                    </span>
                    <br/>
                    <span ex:if-exists=".RTActors" class="actors">
                      <b>Starring</b> <span ex:content=".RTActors"></span>
                    </span>
                    <br/>
                    <span ex:if-exists=".RTWriters" class="writers">
                      <b>Written by</b> <span ex:content=".RTWriters"></span>
                    </span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>

        <table class="content-item" ex:role="lens" style="display: none;" ex:itemTypes="Movie">
          <tr>
            <td class="poster" rowspan="3">
              <a ex:href-subcontent="../Movies/{{".label"|ex_braces}}/">
                <img ex:if-exists=".ThumbURL" ex:src-content=".ThumbURL"
                  width="{{settings.IMDB_THUMBNAIL_WIDTH}}"/></a>
            </td>
            <td class="content-name">
              <a ex:href-subcontent="../Movies/{{".label"|ex_braces}}/">
                <img src="/video/images/mo_icon.png"/>
                <span class="content-title" ex:content=".Title"></span>
                <span class="content-year">(<span ex:content=".Year"></span>)</span>
              </a>
            </td>
          </tr>

          <tr>
            <td>
              <ul class="scores">
                <li class="imdb" ex:if-exists=".IMDbURL">
                  <a ex:href-content=".IMDbURL" target="_blank">
                    <img src="/video/images/exhibit/imdb.jpg" height="14">
                    <span class="imdbrating" ex:content=".IMDbRating"></span>
                  </a>
                </li>
                <li class="rt" ex:if-exists=".RTURL">
                  <a ex:href-content=".RTURL" target="_blank">
                    <span ex:select=".RTST">
                      <img ex:case="f" width="14" height="14" src="/video/images/exhibit/fresh.gif"/>
                      <img ex:case="r" width="14" height="14" src="/video/images/exhibit/rotten.gif"/>
                      <img ex:case="n" width="14" height="14" src="/video/images/exhibit/na.gif"/>
                    </span>
                    <span class="rtrating" ex:content=".RTRating" ex:if-exists=".RTRating"></span>
                    <span ex:if-exists=".RTRating">%</span>
                    <span class="rtna" ex:content="if(contains(.RTST,'n'), 'N/A', '')"></span>
                  </a>
                </li>
                <li class="mc" ex:if-exists=".MCURL">
                  <a ex:href-content=".MCURL" target="_blank">
                    <span ex:select=".MCST">
                      <img ex:case="u" width="14" height="14" src="/video/images/exhibit/metacritic-red.gif"/>
                      <img ex:case="m" width="14" height="14" src="/video/images/exhibit/metacritic-yellow.gif"/>
                      <img ex:case="f" width="14" height="14" src="/video/images/exhibit/metacritic-green.gif"/>
                      <img ex:case="n" width="14" height="14" src="/video/images/exhibit/metacritic-gray.gif"/>
                    </span>
                    <span ex:if-exists=".MCRating" ex:content=".MCRating"></span>
                    <span class="mcna" ex:content="if(contains(.MCST,'n'), 'N/A', '')"></span>
                  </a>
                </li>

                <li class="nyt" ex:if-exists=".NYTReviewURL">
                  <a ex:href-content=".NYTReviewURL" target="_blank">
                    <img src="/video/images/exhibit/nyt_logo.png" width="14" height="14" alt="NYT Review Link"/>
                    Review
                  </a>
                </li>

                <li class="downloads" ex:if-exists=".DL">
                  <img src="/video/images/exhibit/dl.png" width="14" height="14" alt="Download Count"/>
                  <span ex:content=".DL"></span>
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td class="data">
              <table>
                <tr>
                  <td class="imdbdata">
                    <span ex:if-exists=".IMDbGenres" class="genres">
                      <b>Genres:</b> <span ex:content=".IMDbGenres"></span>
                    </span><br ex:if-exists=".IMDbGenres"/>

                    <span ex:if-exists=".IMDbRuntime" class="runtime">
                      <b>Runtime:</b> <span ex:content=".IMDbRuntime"></span> min
                    </span><br ex:if-exists=".IMDbRuntime"/>

                    <span ex:if-exists=".IMDbDirectors" class="directors">
                      <b>Directed by:</b> <span ex:content=".IMDbDirectors"></span>
                    </span><br/>

                    <span ex:if-exists=".IMDbActors" class="actors">
                      <b>Starring:</b> <span ex:content=".IMDbActors"></span>
                    </span><br/>

                    <span ex:if-exists=".IMDbPlotOutline" class="outline">
                      <b>Plot:</b> <span ex:content=".IMDbPlotOutline"></span>
                    </span><br ex:if-exists=".IMDbPlotOutline"/>

                    <span ex:if-exists=".IMDbReleaseDate" class="releasedate">
                      <b>Release Date:</b> <span ex:content=".IMDbReleaseDate" ex:formats="date { template: 'd MMMM yyyy'}"></span>
                    </span>
                  </td>
                  <td class="rtdata">
                    <span ex:if-exists=".RTDirectors" class="directors">
                      <b>Directed by<b> <span ex:content=".RTDirectors"></span>
                    </span>
                    <br/>
                    <span ex:if-exists=".RTActors" class="actors">
                      <b>Starring</b> <span ex:content=".RTActors"></span>
                    </span>
                    <br/>
                    <span ex:if-exists=".RTWriters" class="writers">
                      <b>Written by</b> <span ex:content=".RTWriters"></span>
                    </span>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

        </table>

      </div>
    </td>
  </tr>
</table>

{% endblock %}
